<template>
  <div class="myTime">
    <div class="line">
      <span v-if="title" class="ui ">{{title}}:</span>
      <date-picker v-if="startTime" :date="startTime" :option="option" :limit="limit"></date-picker>
      &nbsp;&nbsp;~&nbsp;&nbsp;
      <date-picker v-if="endTime" :date="endTime" :option="option" :limit="limit"></date-picker>
      <!--<i class="icon-search"></i>-->
      <button v-if="searchBtn" class="ui circular icon button mini searchBtn" @click="$emit('doDateSearch')" title="根据日期搜索"><i class="icon search"></i></button>

    </div>

  </div>
</template>
<script type="text/ecmascript-6">
  import myDatepicker from 'components/common/vue-datepicker'

  import util from '_util/index';
//  import myDatepicker from 'vue-datepicker'
  export default{
    data () {
      return {
        startTime: null,
        endTime: null,
        option: {
          type: 'day',
//          week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
          week: ['一', '二', '三', '四', '五', '六', '日'],
//          month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
          month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          format: 'YYYY-MM-DD',
          placeholder: '请选择日期',
          inputStyle: {},
          color: {
            header: 'rgba(0, 0, 0, 0.75)',
            headerText: 'rgba(255, 255, 255, .9)'
          },
          buttons: {
            ok: '确定',
            cancel: '取消'
          },
          overlayOpacity: 0.5, // 0.5 as default
          dismissible: true // as true as default
        },
        timeoption: {
          type: 'min',
//          week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
          week: ['一', '二', '三', '四', '五', '六', '日'],
//          month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
          month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          format: 'YYYY-MM-DD HH:mm'
        },
        multiOption: {
          type: 'multi-day',
//          week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
          week: ['一', '二', '三', '四', '五', '六', '日'],
//          month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
          month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          format: "YYYY-MM-DD HH:mm"
        },
        limit: [{
          type: 'weekday',
          available: [0,1, 2, 3, 4, 5,6]
        },
          {
            type: 'fromto',
            from: '2010-02-01',
            to: '2026-02-20'
          }]
      }
    },
    watch: {
      dateAll: function (val) {
        this.$emit('setDate', val)
      }
    },
    props: ['title', '_dateAll', 'searchBtn'],
    computed: {
      dateAll(){
        if (this.startTime && this.endTime)
          return {
            startTime: this.startTime.time,
            endTime: this.endTime.time,
          }
        else
          return null
      }
    },
    methods: {
      clearDate(flag=null){
        if(!flag) {
          this.startTime={
            time: ''
          }
          this.endTime= {
            time: ''
          }
        }else{
          this[flag]={
            time: ''
          }
        }

      }
    },
    components: {
      'date-picker': myDatepicker
    },
    created() {
      this.endTime = this._dateAll.endTime
      this.startTime = this._dateAll.startTime

      let eventVue = util.store.get(this,'eventVue');
      eventVue.$on('clearDate',this.clearDate)
    }
  }
</script>
<style rel="stylesheet/less" lang="less" scoped>

  @dir: "common/";
  .myTime {
    .line {
      line-height: 26px;
      span {
        margin-right: 5px;
        display: inline-block;
        line-height: 26px;
      }

      .datepickbox {
        input {
          /*display: inline-block;*/
          /*vertical-align: top;*/
          /*padding: 1px 8px;*/
          /*line-height: 26px;*/
          /*font-size: 16px;*/
          /*border: 2px solid rgba(0, 0, 0, 0.2);*/
          /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);*/
          /*border-radius: 3px;*/
          /*color: #5F5F5F;*/
          cursor: pointer;
        }
      }
      .datepicker-overlay {
        .cov-date-body {
          .cov-date-caption {

          }
        }

      }
      .searchBtn {
        /*display: inline-block;*/
        /*line-height:26px;*/
        vertical-align: middle;
        margin-left: 10px;
        /*font-size:18px;*/
      }
    }
  }
</style>
